import { Component, OnInit, AfterContentInit, Input, ElementRef, Renderer2, TemplateRef, ViewChild, ContentChild } from '@angular/core';
import { WindowWrapper } from '../shared/services';
import { fadeSliderAnimation } from '../shared/animation/index';
import { getRealShape, getPositionForDir } from '../shared/utils/index';

export declare type Shape = {
  width: number;
  height: number;
};

@Component({
  selector: 'el-tooltip',
  animations: [fadeSliderAnimation],
  templateUrl: './tooltip.component.html',

})
export class TooltipComponent implements AfterContentInit {
  private renderer: any;
  private el: any;
  private window: any;
  @Input() disabled: boolean = false;
  @Input() watch: boolean = false;
  @Input() placement: string = 'bottom';
  @Input('popper-class') popperClass: string = '';
  @Input() effect: string = 'dark';
  @Input('visible-arrow') visibleArrow: boolean = false;
  @ViewChild('popperContent') popperContent!: ElementRef;
  @ContentChild('tip') tip!: TemplateRef<any>;
  @Input() xPlacement: string = 'bottom';
  @Input() showPopper: boolean = false;
  @Input() cache: any = {};
  @Input() tipElementShape!: Shape;

  constructor(renderer: Renderer2, el: ElementRef, window: WindowWrapper) {
    this.renderer = renderer;
    this.el = el;
    this.window = window;
  };

  ngOnInit(): void {
  }

  getPosition(hostRect: any, selfRect: any) {
    var /** @type {?} */ doubleConventions = this.placement.includes('-');
    var /** @type {?} */ arrowDir = doubleConventions ? this.placement.split('-')[1] : 'center';
    var /** @type {?} */ dir = doubleConventions ? this.placement.split('-')[0] : this.placement;
    var /** @type {?} */ position = getPositionForDir(hostRect, selfRect, dir, arrowDir);
    this.cache.position = position;
    this.cache.hostRect = hostRect;
  }

  setPopoerPositionAndShow() {
    var _a = this.cache, tipElement = _a.tipElement, position = _a.position;
    var /** @type {?} */ arrowElement = tipElement.querySelector('.popper__arrow');
    this.xPlacement = position.arrowFace;
    this.renderer.setStyle(tipElement, 'left', position.left + "px");
    this.renderer.setStyle(tipElement, 'top', position.top + "px");
    // fix tipbox auto wrap
    this.renderer.setStyle(tipElement, 'min-width', this.tipElementShape.width + "px");
    this.renderer.setStyle(tipElement, 'height', this.tipElementShape.height + "px");
    this.renderer.setStyle(arrowElement, position.arrowDir, position.arrowPosition + "px");
  }


  bindEvent(host: any) {
    var _this = this;
    host.addEventListener('mouseenter', function () {
      if (_this.disabled)
        return;
      _this.setPopoerPositionAndShow();
      _this.showPopper = true;
    });
    host.addEventListener('mouseleave', function () {
      _this.showPopper = false;
      _this.watch && _this.update();
    });
  }

  update() {
    var _this = this;
    var _a = this.cache, tipElement = _a.tipElement, hostRect = _a.hostRect;
    this.renderer.setStyle(tipElement, 'width', 'auto');
    this.renderer.setStyle(tipElement, 'height', 'auto');
    setTimeout(function () {
      _this.tipElementShape = getRealShape(tipElement);
      var /** @type {?} */ tipRect = { width: tipElement.offsetWidth, height: tipElement.offsetHeight };
      _this.getPosition(hostRect, tipRect);
      _this.renderer.setStyle(tipElement, 'min-width', _this.tipElementShape.width + "px");
      _this.renderer.setStyle(tipElement, 'height', _this.tipElementShape.height + "px");
    }, 0);
  }


  ngAfterContentInit() {
    var _this = this;
    var /** @type {?} */ timer = setTimeout(function () {
      var /** @type {?} */ tipElement = _this.popperContent.nativeElement;
      var /** @type {?} */ hostElement = _this.el.nativeElement.children[0];
      _this.bindEvent(hostElement);
      _this.cache.tipElement = tipElement;
      _this.tipElementShape = getRealShape(tipElement);
      var /** @type {?} */ tipRect = { width: tipElement.offsetWidth, height: tipElement.offsetHeight };
      var /** @type {?} */ hostRect = hostElement.getBoundingClientRect();
      _this.getPosition(hostRect, tipRect);
      clearTimeout(timer);
    }, 0);
  }
}
